import React, {Component} from 'react'
import {Link} from 'react-router'
import '../sass/ProductList'

import ProductListDefaultBg from '../../global/components/ProductListDefaultBg'
import LazyLoad from 'react-lazyload'

export default class HotGoods extends Component {
  constructor() {
    super()
  }

  render() {
    const {items, fetchAddToCart} = this.props
    let imgWidth = `${(window.innerWidth - 30) * 0.384}px`

    if (items.length) {
      return (
            <div className="sales-list">
                {
                    items.map((item, i) =>
                        <div className="sales-list-box" key={i}>
                            <Link to={`/p/${item.goodsId}`}>
                                <div className="img-div" style={{minWidth: imgWidth, minHeight: imgWidth}}>
                                    <LazyLoad placeholder={<ProductListDefaultBg/>}>
                                        <img src={item.pictureUrl ? item.pictureUrl : require('../images/goods_default.png')} alt=""/>
                                    </LazyLoad>
                                </div>
                            </Link>
                                <div className="text-div">
                                    <Link to={`/p/${item.goodsId}`}><p className="name">{item.name}</p></Link>
                                    <p className="price">{item.salePrice ? item.salePrice : item.price} <i className="iconfont icon-tianjiagouwuche"
                                                                                                           onClick={fetchAddToCart.bind(this, {
                                                                                                             count: '1',
                                                                                                             goodsId: item.goodsId,
                                                                                                             status: '1',
                                                                                                             add: true
                                                                                                           })}/></p>
                                </div>
                        </div>
                    )
                }
            </div>
      )
    } else {
      return (
            <div></div>
      )
    }
  }
}
